<template>
  <div class="My">
    <van-nav-bar class="page-nav-bar navbar" title="我的账户">
      <van-icon
        slot="right"
        name="setting-o"
        color="#000"
        size="22"
        @click="set"
      ></van-icon>
    </van-nav-bar>
    <br />
    <van-cell-group class="cellg">
      <van-cell
        class="weight gengduo"
        size="large"
        title-style="font-weight: 700;"
        title="我的订单"
        value="更多"
        is-link
      />
      <van-cell
        icon="bag-o"
        title="已收货"
        value="内容"
        size="large"
        label="xxxxxxxx"
        is-link
        arrow-direction="down"
      />
    </van-cell-group>
    <br />
    <van-cell-group class="cellg">
      <van-cell
        class="weight gengduo"
        size="large"
        title-style="font-weight: 700;"
        title="我的账户"
      />
      <van-cell title="我的设置" is-link @click="set" />
      <van-cell title="我的积分" is-link />
      <van-cell title="评价" is-link @click="$router.push('/evaluate')" />
    </van-cell-group>
    <br />
    <van-cell-group class="cellg">
      <van-cell
        title-style="font-weight: 700;"
        size="large"
        title="需要帮助吗？"
      />
      <van-cell title="会员信息" is-link @click="$router.push('/vip')" />
      <van-cell title="客户服务" is-link />
      <van-cell title="关注我们" is-link />
      <van-cell title="联系我们" is-link />
    </van-cell-group>
    <div class="tuichu">
      <van-button
        class="tuichuanniu"
        type="danger"
        @click="onLogin"
        round
        block
        >{{ denglu }}</van-button
      >
    </div>
    <!-- 设置弹出层 -->
    <van-popup
      v-model="isShow"
      position="bottom"
      :style="{ height: '100%' }"
      class="set"
    >
      <van-nav-bar title="设置">
        <van-icon
          slot="left"
          name="arrow-left"
          color="#000"
          size="22"
          @click="isShow = false"
        ></van-icon>
      </van-nav-bar>
      <van-cell-group>
        <van-cell title="语言" value="中文" is-link />
        <van-cell title="清理缓存" value="280.88MB" is-link />
      </van-cell-group>
      <br />
      <van-cell-group>
        <van-cell title="当前版本" value="Version 2.6.6" is-link />
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      denglu: "退出登录",
    };
  },
  methods: {
    set() {
      this.isShow = true;
    },
    onLogin() {
      this.$dialog.confirm({
        title: "标题",
        message: "弹窗内容",
      })
        .then(() => {
          this.$store.commit("user/removeToken");
          this.$toast.success("退出登录");
          this.$router.push("/login");
        })
        .catch(() => {
        });
    },
  },
  created() {},
  updated() {
    if (this.$store.state.user.token) {
      this.denglu = "退出登录";
    } else {
      this.denglu = "登录";
    }
  },
};
</script>

<style scoped lang='less'>
.My {
  padding-bottom: 65px;
  padding-top: 33px;
  .navbar {
    position: fixed;
    width: 100%;
    height: 55px;
    line-height: 55px;
    top: 0;
    border-bottom: 1px solid #f5f6f7;
  }
  /deep/.page-nav-bar .van-nav-bar__title {
    font-weight: 600;
    color: #000;
  }
  .tuichuanniu {
    margin-top: 20px;
    width: 280px;
  }
  .tuichu {
    display: flex;
    justify-content: center;
    justify-items: center;
    width: 100%;
  }
}
</style>
